<style>
    #upload_organization_frame .upload-file {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:#e9e9e9;
    }
    #upload_organization_frame .file-frame {
        position:absolute;
        width:90%;
        height:128px;
        top:20px;
        left:50%;
        margin-left:-45%;
        background:#0dc8ff;
        border-radius:4px;
        color:#fff;
        font-size:16px;
        box-shadow:0px -5px 35px #a4daff;
        text-align:center;
    }
    #upload_organization_frame .upload-log {
        position:absolute;
        top:140px;
        left:0;
        right:0;
        bottom:0;
        background:#fff;
    }
    #upload_organization_frame #upload-file-button {
        position:absolute;
        left:50%;
        margin-left:-45px;
        bottom:15px;
        width:90px;
        color:#ffffff;
        padding:5px 0px;
        text-align:center;
        background:transparent;
        border:2px solid #ffffff;
        border-radius:3px;
        outline:none;
        transition:all ease .2s;
    }
    #upload_organization_frame #upload-file-button:hover {
        color:#000000;
        background:#ffffff;
    }
    #upload_organization_frame #upload-file-button:active {
        box-shadow:2px 2px 10px #ccc inset;
    }
    #upload_organization_frame .upload-log {
        position:relative;
        padding-top:40px;
        text-align:center;
    }
    #upload_organization_frame .upload-log:after {
        position: absolute;
        top:15px;
        width: 40px;
        height: 5px;
        background: #e9e9e9;
        content: ' ';
        left:50%;
        margin-left:-20px;
        border-radius:10px;
    }
    #upload_organization_frame .upload-log > label {
        margin:0 20px;
    }
    #upload_organization_frame .upload-log-table {
        width:100%;
        height:260px;
        overflow-y: auto;
        margin-top:10px;
        border-top:1px solid #eee;
        border-bottom:1px solid #eee;
    }
    #upload_organization_frame .res-success {
        position:relative;
        color:lightseagreen;
    }
    #upload_organization_frame .res-success:before {
        position:absolute;
        top:6px;
        left:-15px;
        content:' ';
        width:10px;
        height:10px;
        border-radius:10px;
        background:lightseagreen;
    }
    #upload_organization_frame .res-false {
        position:relative;
        color:#e26b1d;
    }
    #upload_organization_frame .res-false:before {
        position:absolute;
        top:6px;
        left:-15px;
        content:' ';
        width:10px;
        height:10px;
        border-radius:10px;
        background:#e26b1d;
    }
    #upload_organization_frame #file-address {
        margin-top:15px;
        font-size:16px;
        font-family:'microsoft yahei';
        font-weight:normal;
        color: #ffffff !important;
    }
    #upload_organization_frame #upload-pro {
        position:absolute;
        left:50%;
        margin-left:-45px;
        border:none;
        bottom:15px;
        width:90px;
        height:19px;
        background:transparent;
        padding:5px 0px;
        text-align:center;
        border-radius:3px;
        outline:none;
    }
    #upload_organization_frame #upload-pro-ed {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        width:0%;
        transition:all ease .2s;
        background:#21aaff;
        border-radius: 3px;
    }
    #upload_organization_frame .change-upload-pro {
        background:#ffffff;
        animation:changeUploadPro 1s ease forwards;
    }
    @keyframes changeUploadPro {
        0% {height:19px;width:90px;margin-left:-45px;background:#ffffff;}
        30% {height:4px;padding:0;width:90px;margin-left:-45px;background:#ffffff;}
        90% {height:4px;width:98%;margin-left:-49%;padding:0;background:#ffffff;}
        100% {height:4px;width:90%;margin-left:-45%;padding:0;background:#ffffff;}
    }
    #upload_organization_frame .upload-pro-ed-notify {
        position:absolute;
        right:-25px;
        height:24px;
        min-width:50px;
        bottom:10px;
        color:#000;
        font-size:12px;
        border-radius:3px;
        background:url('images/pro-ed-notify.png') center no-repeat;
        background-size:cover;
        display:none;
    }
    #upload_organization_frame table {
        border:none;
        width:100%;
    }
    #upload_organization_frame table tr {
        border-bottom:1px solid #e9e9e9;
        height: 30px;
    }
</style>

<article id="upload_organization_frame">
    <div class="upload-file">
        <div class="file-frame">
            <h1 id="file-address">请选择文件</h1>
            <form enctype="multipart/form-data">
                <input type="file" name="upload-file" style="display:none" />
            </form>
            <div id="upload-pro">
                <div id="upload-pro-ed"><div class="upload-pro-ed-notify">0%</div></div>
            </div>
            <button id="upload-file-button">上传</button>
        </div>
        <div class="upload-log">
            <div id="titleHtml"><label class="res-success">成功：<span>0</span></label><label class="res-false">失败：<span>0</span></label></div>
            <div class="upload-log-table">
                <table>
                    <thead>
                        <tr>
                            <th colspan="2" style="text-align: center">有效数据</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="upload-log-table">
                <table>
                    <thead>
                        <tr>
                            <th colspan="2" style="text-align: center">重复数据</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="upload-log-table">
                <table>
                    <thead>
                        <tr>
                            <th colspan="2" style="text-align: center">格式异常数据</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</article>
